<template>
  <div class="main">
    <div class="login-box">
      <div class="title">Cms 管理系统</div>
      <div class="small-title">管理员登录</div>
      <div>
        <el-form
          ref="formModelRef"
          style="max-width: 600px"
          :model="formModel"
          :rules="rules"
          label-width="auto"
          class="demo-formModel"
          :size="formSize"
          status-icon
        >
          <el-form-item prop="username">
            <el-input v-model="formModel.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formModel.password"
              show-password
              placeholder="密码"
            />
          </el-form-item>

          <el-form-item>
            <div class="flex flex-between" style="width: 100%">
              <el-checkbox v-model="rememberMe" label="记住密码"></el-checkbox>
              <span @click="showPwdDialog = true">
                重置密码
              </span>
            </div>
          </el-form-item>

          <el-form-item class="btn-group">
            <el-button type="primary" @click="submitForm(formModelRef)">
              登录
            </el-button>
            <el-button @click="resetForm(formModelRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <PwdForm title="修改密码" :showDialog="showPwdDialog" @update:showDialog="(v)=>showPwdDialog = v"></PwdForm>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { login } from "@/api/user";
import { ElMessage } from "element-plus";
import { setToken } from "@/utils/token";

import { getUnamePwd, setUnamePwd, removeUnamePwd } from "@/utils/userinfo";

import PwdForm from '@/components/PwdForm.vue'

import {pwdRules} from "@/utils/tool"

const formSize = ref("default");
const formModelRef = ref();
const formModel = reactive({
  username: "",
  password: "",
});

// 显示重置密码框
const showPwdDialog = ref(false)

const router = useRouter();
const route = useRoute();
// console.log('route: ', route);

const rules = reactive({
  username: [
    { required: true, message: "请先填写用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度范围应该在3--20之间", trigger: "blur" },
  ],
  password: pwdRules,
});

const rememberMe = ref(false); // 默认不勾选
const userPwd = getUnamePwd();
if (userPwd) {
  formModel.username = userPwd.uname;
  formModel.password = userPwd.pwd;
  rememberMe.value = true;
} else {
  formModel.username = '';
  formModel.password = '';
}

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", formModel);
      //   请求接口 登录
      login(formModel).then((res) => {
        console.log("res: ", res);
        if (res.code == 1) {
          // 弹出
          ElMessage.success(res.msg || "登录成功");
          //   console.log(rememberMe.value,'== 是否记住密码')
          if (rememberMe.value) {
            // 记住密码
            setUnamePwd({
              uname: formModel.username,
              pwd: formModel.password,
            });
          } else {
            removeUnamePwd();
          }
          // setToken
          setToken(res.data.token);
          // 跳转到用户中心
          router.push(route.query.redirect || "/");
        } else {
          //   refreshCaptcha()
          ElMessage.error(res.msg || "登录失败");
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
/* 主容器样式 */
.main {
  background: #8089ff; /* 背景颜色 */
  width: 100%; /* 宽度100% */
  height: 100vh; /* 高度为视口高度 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */

  /* 登录框样式 */
  .login-box {
    background: #fff; /* 背景颜色为白色 */
    width: 500px; /* 宽度500px */
    padding: 30px; /* 内边距30px */
    border-radius: 10px; /* 圆角半径10px */

    /* 标题样式 */
    .title {
      font-size: 32px; /* 字体大小32px */
      text-align: center; /* 文本居中对齐 */
      padding: 10px 0; /* 内边距上下各10px */
      color: var(--el-color-primary); /* 使用自定义变量设置颜色 */
    }

    /* 小标题样式 */
    .small-title {
      color: var(--el-color-primary); /* 使用自定义变量设置颜色 */
      text-align: center; /* 文本居中对齐 */
      padding: 15px 0; /* 内边距上下各15px */
    }

    /* 按钮组样式 */
    .btn-group {
      /* 按钮样式 */
      button {
        width: 243px; /* 按钮宽度243px */
      }
    }
  }
}
</style>
